<template>
<!--  <el-container>-->
<!--    <el-header>Header</el-header>-->
<!--    <el-container>-->
<!--        <el-aside width="200px">Aside</el-aside>-->
<!--        <el-main>Main</el-main>-->
<!--        -->
<!--    </el-container>-->
<!--    <el-footer>Footer</el-footer>-->
<!--  </el-container>-->
<!--  <el-link href="/catalog/view" target="_blank">默认链接</el-link>-->


  <div class="hi">
    Hi
    <Top></Top>
    <input id='bu' type="button" @click="aba('man')" value="damn"></input>
    <el-link href="catagory" target="_blank">默认链接</el-link>-->
    <tr v-for="(product1) in Product">
      <td>{{product1}}</td>
    </tr>
    <h1 id="a">plnb</h1>
  </div>

<!--  <div id="Catalog">-->

<!--    <h2><font color="black" th:text="${category.name}"></font></h2>-->

<!--    <table>-->
<!--      <tr>-->
<!--        <th>Product ID</th>-->
<!--        <th>Name</th>-->
<!--      </tr>-->
<!--      <tr th:each="product:${productList}">-->
<!--        <td><a th:href="@{/catalog/viewProduct(productId=${product.productId})}" th:text="${product.productId}"></a>-->
<!--        </td>-->
<!--        <td><a th:href="@{/catalog/viewProduct(productId=${product.productId})}" th:text="${product.name}"></a</td>-->
<!--        &lt;!&ndash;                <td th:text="${product.productId}">&ndash;&gt;-->
<!--        &lt;!&ndash;                    <stripes:link class="org/csu/mypetstore/controller/CatalogController" event="viewProduct">&ndash;&gt;-->
<!--        &lt;!&ndash;                        <stripes:param name="productId" value="${product.productId}"/>&ndash;&gt;-->
<!--        &lt;!&ndash;                    </stripes:link>&ndash;&gt;-->
<!--        &lt;!&ndash;                </td>&ndash;&gt;-->
<!--        &lt;!&ndash;                <td th:text="${product.name}"></td>&ndash;&gt;-->
<!--      </tr>-->
<!--    </table>-->

<!--  </div>-->


</template>

<script>
  import Top from "../common/Top";
  import Bottom from "../common/Bottom";
  import $ from 'jquery'

  export default {
    data(){
      return{
        message: 'hello fuck you!',
        Product:[]
      }
    },
    components:{
      Top,
      Bottom
    },
    created() {
      this.init()
    },
    methods:{
      aba:function (message){
        alert('???,fuck you.' + message)
        this.axios.get('catalog/products/AV-CB-01')
          .then(function (response){
            console.log(response)
          })

      },
      init:function () {
        var _this = this
        console.log(this)
        this.axios.get('catalog/products/AV-CB-01')
        .then(function (response){
          console.log(response.data)
          _this.Product.push(response.data)
          console.log('ha')
          console.log(response.data.data.productId)
          $("#a").text(response.data.data.productId)
        })
        .catch(function (error) {
          console.log(error)
        })
      }
    }
    // name: "main"
    // data(){
    //   message: 'hello'
    // }

  }

</script>

<style scoped>
.hi{
  color:red;
}
</style>
